import React from 'react';
import './styles/App.scss';
import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'
import Home from './pages/Home'
import Found from './pages/Found'
import My from './pages/My'
import NotPage from './pages/NotPage'
import CitySelect from './pages/CitySelect'
import MapFound from './pages/MapFound'
import getLocation from './utils/getlocation'
import {connect} from 'react-redux'
class App extends React.Component {
  componentDidMount(){    
    // 页面加载后调用获取位置的方法
    this.props.getCity();
  }
  render() { 
    return ( 
      <div>
        {this.props.cityName &&
        <HashRouter>
        <Switch>
          <Route exact path='/'>
            <Redirect to='/home'></Redirect>
          </Route>
          <Route path='/home' component={Home}></Route>
          <Route path='/found' component={Found}></Route>
          <Route path='/my' component={My}></Route>
          <Route path='/cityselect' component={CitySelect}></Route>
          <Route path='/mapfound' component={MapFound}></Route>
          <Route component={NotPage}></Route>
        </Switch>
      </HashRouter>
        }
        </div>
     );
  }
}
// 将仓库数据映射到props上
 const mapStateToProps = (state) => ({
   cityName:state.address.city
 })
//  先把封装好的获取定位城市的数据赋值给store仓库
const mapDispatchToProps = (dispatch) =>({
     getCity : ()=>{
      getLocation().then(res =>{
        res.city = res.city.replace('市','')
        const action = {
          type:'get_city',
          value:res
        }
        dispatch(action)
      })
    }
 })
//  使用connect联系代理商 

export default connect(mapStateToProps,mapDispatchToProps)(App);
